<template>
	<view class="container">
		<uni-card is-full :is-shadow="false">
			<text class="uni-h6">通告栏组件多用于系统通知，广告通知等场景，可自定义图标，颜色，展现方式等。</text>
		</uni-card>
		
		<Section title="多行显示" type="line">
			<uni-notice-bar text="多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示" />
		</Section>
		
		<Section title="文字滚动" subTitle="使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示" type="line">
			<uni-notice-bar 
				show-icon 
				scrollable
				text="文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动" 
			/>
		</Section>
		
		<Section title="查看更多" subTitle="使用 show-get-more 显示更多,此时 single 属性将失效,始终单行显示,如不配置 more-text 属性 ,将显示箭头图标"
			type="line">
			<uni-notice-bar show-get-more show-icon text="查看更多查看更多查看更多" @getmore="getMore" />
		</Section>
		
		<Section title="修改颜色" type="line">
			<uni-notice-bar 
				single color="#2979FF" 
				background-color="#EAF2FF"
				text="修改颜色修改颜色修改颜色修改颜色修改颜色修改颜色修改颜色修改颜色修改颜色修改颜色修改颜色修改颜色修改颜色" 
			/>
		</Section>
		
		<Section title="关闭按钮" subTitle="使用 show-close 属性,可关闭通知" type="line">
			<uni-notice-bar show-close single text="关闭按钮关闭按钮关闭按钮关闭按钮关闭按钮关闭按钮关闭按钮" />
		</Section>
	</view>
</template>

<script setup>
function getMore() {
	uni.showToast({
		title: '点击查看更多',
		icon: 'none'
	})
}
</script>

<style lang="scss" scoped>
.container {
	/* #ifndef APP-NVUE */
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	/* #endif */
}
</style>